<!DOCTYPE html>

<ul class="sidebar-nav">
  <li class="sidebar-brand">
    {{ 'GAME_NAME' | translate }} v{{ct.data.version}}
  </li>
<div ng-repeat="element in ct.activeElements(ct.state.player)">
  <li ng-repeat="key in ct.visibleResources(element, ct.state.player)"
      ng-mouseover="ct.state.removeNew(key)"
      class="row">
    <get-html value="key"
              class="col-xs-2"></get-html>
    <pretty value="ct.state.player.resources[key]"
            class="col-xs-6"></pretty>
    <span class="col-xs-4 sidebar-icons">
      <span ng-if="ct.data.radioisotopes.indexOf(key) != -1"
            class="mdi mdi-18px mdi-radioactive"></span>
      <span ng-if="ct.state.hasNew(key)"
            class="mdi mdi-18px mdi-alert-decagram"></span>
    </span>
    <ul ng-if="ct.data.radioisotopes.indexOf(key) != -1"
        class="sub-nav">
      <li class="row">
        <span class="col-xs-2">
    			t<sub>1/2</sub>
    		</span>
        <span class="col-xs-10">
    			<pretty value="ct.data.resources[key].decay.half_life"></pretty>
    			s
    		</span>
      </li>
      <li ng-repeat="(type, decay) in ct.data.resources[key].decay.decay_types"

          class="row">
        <span ng-if="decay.ratio !== 1"
              class="col-xs-2">
			    {{decay.ratio*1000/10}}%
		    </span>
        <get-html value="type"
                  class="col-xs-2"></get-html>
        <span ng-bind-html="ct.util.trustHTML(ct.format.reactionFormat(1, decay.reaction, ct.state.player))"
              class="col-xs-8"></span>
      </li>
    </ul>
  </li>
</ul>
</div>
